<html lang="zh-cmn-Hans"><head>
    <meta charset="utf-8">
    <title>成绩查询</title>
    <link rel="shortcut icon" href="http://matchtest.aidemed.com/static/upload/1bef8140bc032603/2eb0febdb8163269.ico">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0,minimal-ui">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script type="text/javascript" src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <style type="text/css">
        /********************************common****************************************************/
        html,body{padding: 0px;margin: 0px;height: 100%;}
        body{
            background: url({$info['bg_img']});
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-position: center 0;
            position:relative;
            overflow: hidden;
        }
        .cover-grey{
            background: rgba(34, 34, 34, 0.67) none repeat scroll 0 0;
            height: 100%;
            width: 100%;
            position: absolute;top: 0
        }
        .container{
            margin: 0 auto;
            color: #fff;
            padding: 30vh 0 0;
        }
        .container > div{
            margin: 0 auto;
            min-width: 200px;
            box-sizing: border-box;
            width: 600px;
            padding: 20px;
            border-radius: 5px;
        }
        .container .title{
            text-align: center;
            margin-bottom: 20px
        }
        .container h2{
            font-size: 30px;
            color: #422a28;
            text-align: center;
            padding-bottom:20px;
            font-weight: bold;
        }
        .login{
            background: rgba(255, 255, 255, 0.34) none repeat scroll 0 0;
            position: relative;
            display: block;

        }
        @media screen and (max-width: 450px){
            .container{
                padding-top: 25vh;
            }
            .container > div{
                width: 250px;
            }
            input,select{
                width: 210px!important;
            }
        }
        @media(max-width: 600px) and (min-width: 450px){
            .container > div{
                width: 350px;
            }
            input,select{
                width: 310px !important;
            }
        }
        input,select{
            margin-bottom: 20px;
            border-radius: 5px;
            border: 1px solid #ddd;
            color: #666;
            padding: 1vw;
            display: block;
            width: 560px;
            font-size: 20px;
            line-height: 30px;
            box-sizing: border-box;
        }
        .btn{
            padding: .5vw 1.5vw;
            border-radius: 5px;
            background:#f9a02c;
            display:block;
            font-size: 20px;
            line-height: 35px;
            text-align: center;
        }
        .btn:hover,.btn:active{background:#e89323;cursor: pointer}
        .cover-grey{
            width: 100%;
            height: 100%;
            position: absolute;
            background: #000;
            top: 0;
            left: 0;
            opacity: .5;
            display: none;
        }
        .score-bg{
            color: #333;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow-y: scroll;
            display: none;
            z-index: 99997;
        }
        .score-bg .detail-img{
            text-align: center;
            margin-top: 5vh;
            color: #fff;
        }
        .score-bg .detail-img img{background: #fff;max-width: 600px;max-height: 800px;margin-bottom: 10px; width: 90%;}
        .score-bg .detail-img .btn{
            max-width: 600px;
            margin: 0 auto;
            width: 90%;
        }
        .over {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #f5f5f5;
            opacity:0.5;
            z-index: 1000;
        }

        .layout {
            display: none;
            position: absolute;
            top: 40%;
            left: 40%;
            width: 20%;
            height: 20%;
            z-index: 1001;
            text-align:center;
        }
    </style>
</head>
<body>
<div class="container">
    <!-- <div class="title">
        <img src="http://matchtest.aidemed.com/static/theme/default/img/logo-219.png">
    </div> -->
    <div class="login">
        <h2>成绩查询入口</h2>
        <select name="race" id="race">
            <option value="105">{$info['title']}</option>
        </select>
        <input type="text" name="raceNum" data-anim="0" placeholder="输入参赛号码">
        <input name="enrollid" type="hidden">
        <span class="btn" id="search_btn">查询</span>
    </div>
</div>
<div class="cover-grey"></div>
<div class="score-bg">
    <div class="detail-img">
        <img id="report">
        <p><span class="btn" id="download_btn">下载</span></p>
        <p><span class="js_back">返回查询成绩入口</span></p>
    </div>
</div>
<div id="over" class="over"></div>
<div id="layout" class="layout"><img src="http://matchtest.aidemed.com/static/theme/default/img/loading.gif" alt=""></div>
<script type="text/javascript">
    $('#search_btn').on('click',function(){
        var raceNum = $("input[name='raceNum']").val();
        if($.isEmptyObject(raceNum) == true){
            alert("请输入参赛号码！");
            return false;
        }
        $.ajax({
            type : "POST",
            url : './getCert.html',
            dataType : "JSON",
            data : {cert_file:{$info['cert_file']},number:raceNum},
            success : function(data){
                console.log(data);
                if(data.errcode == 0){
                    $('.login').hide();
                    $('.cover-grey').fadeIn(200);
                    $('.score-bg').fadeIn(200);
                    $("input[name='enrollid']").val(data.file);
                    $("#report").attr("src",data.file);
                }else{
                    alert("未查询出成绩信息，请检查证件号码是否正确录入！");
                }
            },
            beforeSend:function(){
                $("#search_btn").attr({disabled:"disabled"});
                $("#over").css('display','block');
                $("#layout").css('display','block');
            },
            complete:function(){
                $("#search_btn").removeAttr("disabled");
                $("#over").css('display','none');
                $("#layout").css('display','none');
            }
        });
    });
    $("#download_btn").click(function(){
        var enrollid = $("input[name='enrollid']").val();
        if( enrollid != '' ){
            window.open(enrollid);
        }
    });
    $('.js_back').on('click',function(){
        $('.score-bg').fadeOut(200);
        $('.cover-grey').fadeOut(200);
        $('.login').show();
    });
    if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
        $('#download_btn').html('长按图片保存');
    }
</script>


</body></html>
